<template>
  <ul>
    <li @click="handleClick('Comp1')">组件一</li>
    <li @click="handleClick('Comp2')">组件二</li>
  </ul>
  <div>
    <component :is="componentId"></component>
  </div>
</template>

<script>
import Comp1 from './Comp1'
import Comp2 from './Comp2'
export default {
  data() {
    return {
      componentId: Comp1
    }
  },

  components: {
    Comp1,
    Comp2
  },

  methods: {
    handleClick(comp) {
      this.componentId = comp === 'Comp1' ? Comp1 : Comp2
    }
  },
}
</script>

<style lang='stylus' scoped>

</style>